<template>
  <div>
    <ComTable
      @handleCurrentChange="handleCurrentChange"
      @handleSizeChange="handleSizeChange"
      :config="config"
      :pagination="{
        total: pageing.total,
        pageNum: pageing.pageNum,
        pageSize: pageing.pageSize,
      }"
      :list="consumptiontable"
      :modes="consumptionModes"
    >
      <el-table-column label="消费时间" prop="createdTime">
        <template slot-scope="scope">
          <el-popover
            placement="top-start"
            trigger="hover"
            :content="scope.row.createdTime"
            v-if="scope.row.createdTime"
          >
            <p slot="reference">
              {{ getTime(scope.row.createdTime) }}
            </p>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column align="left" width="70" label="订单状态">
        <template slot-scope="scope">
          <span
            @click="
              drawer = true;
              RowClickFn(scope.row);
            "
            style="color: #f87a23; cursor: pointer"
            >{{ selecstatus(scope.row.status) }}</span
          >
        </template>
      </el-table-column>
    </ComTable>

    <Comdrawer
      size="60%"
      title="订单详情"
      :drawer="consultingState"
      @eventColse="eventColse"
      v-if="consultingState"
    >
      <template #title>
        <p class="drawer-title">{{ selecstatus(oderlist.status) }}</p>
      </template>
      <div class="drawerMain">
        <div class="orderNo-box">
          <h4>订单编号：{{ oderlist.orderNo }}</h4>
          <el-badge :value="unread" class="item" :hidden="!unread">
            <svg-icon icon-class="xx_icon_nor" @click="message" />
          </el-badge>
        </div>

        <h3>订单信息</h3>
        <ul>
          <li>
            <span>订单类型</span>
            <p>{{ selectype(oderlist.type) }}</p>
          </li>
          <li>
            <span>订单金额</span>
            <p>{{ oderlist.amount }}</p>
          </li>
          <li>
            <span>创建时间</span>
            <p>{{ oderlist.createdTime }}</p>
          </li>
          <li>
            <span>咨询方式</span>
            <p>{{ oderlist.goods && oderlist.goods.consultMode.name }}</p>
          </li>
          <li>
            <span>问题类型</span>
            <p>{{ oderlist.goods && oderlist.goods.type }}</p>
          </li>
          <li>
            <span>专家等级</span>
            <p>{{ oderlist.goods && oderlist.goods.consultGrade }}</p>
          </li>
          <li>
            <span>服务专家</span>
            <p>{{ oderlist.expertName }}</p>
          </li>
          <li>
            <span>咨询问题</span>
            <p>
              {{ oderlist.title }}
            </p>
          </li>
          <li
            v-for="(fileItem, fileindex) in oderlist.goods &&
            oderlist.goods.files"
            :key="fileindex"
          >
            <span>附件</span>

            <i class="el-icon-document"></i>
            <a :href="fileItem">{{
              fileItem.substring(fileItem.lastIndexOf("/") + 1)
            }}</a>
          </li>
          <!-- <li>
            <span>{{oderlist.goods&&oderlist.goods.files[0]}}</span>
            <span>附件</span>
            <p >
              <a href="#">附件1：shuas3483850423.png</a>
              <a href="#">附件2：23244.pdf</a>
              <a href="#">附件3：法律体系.word</a>
               fileItem.substring(
                  fileItem.lastIndexOf("/") + 1,
                  fileItem.lastIndexOf(".")
                )
            </p>
          </li> -->
        </ul>

        <div v-if="oderlist.goods && oderlist.goods.answers.length">
          <h3>解答（{{ oderlist.goods.answers[0].content.length }}）</h3>

          <div
            class="awearItem-box"
            v-for="(contentItem, contentIndex) in oderlist.goods.answers"
            :key="contentIndex"
          >
            <!-- 回复内容 -->
            <main
              class="comment-content"
              v-for="(answerItem, answerIndex) in contentItem.content"
              :key="answerIndex"
            >
              <div class="title-box">
                <img
                  class="img"
                  style="height: 32px; width: 32px; border-radius: 20px"
                  :src="contentItem.avatar"
                />
                <div class="name">{{ contentItem.expertName }}</div>
                <div class="time">· {{ answerItem.createTime }}</div>
              </div>
              <div>
                {{ answerItem.answer }}
                <div
                  v-if="answerItem.law && answerItem.law.length != 0"
                  class="law-box"
                >
                  <div class="law-tile">
                    {{ answerItem.law && answerItem.law[0].title }}
                  </div>

                  <div
                    v-for="(lawItem, lawIndex) in answerItem.law"
                    :key="lawIndex"
                  >
                    <div class="law-content">
                      <div
                        class="content-fen"
                        v-for="(lawContent, index) in lawItem.content"
                        :key="index"
                      >
                        {{ lawContent }}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="accessory">
                <ul>
                  <li v-for="(file, index) in answerItem.file" :key="index">
                    <a :href="file.url">
                      <span class="el-icon-document">
                        附件：{{ file.name }}</span
                      >
                      <svg-icon icon-class="download" />
                    </a>
                  </li>
                </ul>
              </div>
            </main>
          </div>
        </div>
      </div>
    </Comdrawer>

    <!-- 合同 -->
    <Comdrawer
      size="60%"
      title="订单详情"
      :drawer="contractshow"
      @eventColse="contractColse"
    >
      <template #title>
        <p class="drawer-title">{{ selecstatus(oderlist.status) }}</p>
      </template>
      <div class="codeclass">
        <span>订单编号：{{ oderlist.orderNo }}</span>
      </div>
      <div class="businEdit">
        <el-descriptions
          title="订单信息"
          :column="1"
          :contentStyle="CS"
          :label-style="LS"
        >
          <el-descriptions-item label="订单类型">{{
            selectype(oderlist.type)
          }}</el-descriptions-item>
          <el-descriptions-item label="订单金额">{{
            oderlist.amount
          }}</el-descriptions-item>
          <el-descriptions-item label="内容类型">{{
            selectype(oderlist.type)
          }}</el-descriptions-item>
          <el-descriptions-item label="编辑者">{{
            oderlist.nickname
          }}</el-descriptions-item>
          <el-descriptions-item label="创建时间">{{
            oderlist.createdTime
          }}</el-descriptions-item>
        </el-descriptions>
      </div>
    </Comdrawer>

    <!-- ***************项目弹窗************************ -->
    <Comdrawer
      size="60%"
      title="订单详情"
      :drawer="projectShow"
      @eventColse="projectColse"
    >
      <!-- 项目更改记录按钮 -->
      <template slot="title">
        <i class="el-icon-document recordBtn" @click="clickRecord"></i>
      </template>
      <Project :orderInfo="orderInfo"></Project>
    </Comdrawer>

    <!-- 项目更改记录 -->
    <Comdrawer
      size="30%"
      title="更改记录"
      :drawer="recordShow"
      @eventColse="recordColse"
    >
      <Record :orderInfo="orderInfo" :project="projectData"></Record>
    </Comdrawer>

    <!-- 修改项目改价 -->
    <Comdrawer
      size="30%"
      title="更改记录"
      :drawer="editRewardShow"
      @eventColse="editRewardColse"
    >
      <EditReward :orderInfo="orderInfo" :project="projectData"></EditReward>
    </Comdrawer>

    <!-- 修改收比 -->
    <Comdrawer
      size="30%"
      title="修改收比"
      :drawer="editRatioShow"
      @eventColse="editRatioColse"
    >
      <EditRatio :orderInfo="orderInfo"></EditRatio>
    </Comdrawer>

    <!-- ***************项目弹窗 end************************ -->
  </div>
</template>

<script>
import ComTable from "@/wss/components/comTable.vue";
import Comdrawer from "@/wss/components/Comdrawer.vue";
import {
  getConsumptionapigetInfo,
  editinvoiceidlist,
} from "@/BMViews/api/myOrder/myOrder.js";
import {
  getConsumptionapilist,
} from "@/wss/newApi_3-24/askAround/index";
import { getMessageList } from "@/BMViews/api/upload/index.js";


// 项目组件
import Project from "../project/project.vue";
import Record from "../project/record.vue";
import EditReward from "../project/editReward.vue";
import EditRatio from "../project/editRatio.vue";

export default {
  name: "Consumption",
  // props: {
  //   consumptiontable: {
  //     type: Array,
  //   },
  //   getFatherMethod: {
  //     type: Function,
  //     default: () => {
  //       return Function;
  //     },
  //   },
  // },
  // props: ["consumptiontable"],
  components: { ComTable, Comdrawer, Project, Record, EditReward, EditRatio },
  data() {
    return {
      // 表格配置
      config: {
        // border: true,
        isAdd: false,
        loading: false,
      },
      oderlist: [], //订单详情
      unread: 0, //未读信息数量
      circleUrl:
        "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png", //头像

      //圈主消费详情表格
      consumptionModes: [
        // {
        //   showOverflowTooltip: true,
        //   label: "订单号",
        //   mode: "orderNo",
        // },
        {
          label: "手机号",
          mode: "phone",
          showOverflowTooltip: true,
        },
        {
          label: "用户姓名",
          mode: "nickname",
          showOverflowTooltip: true,
        },
        {
          label: "消费类型",
          mode: "type",
          showOverflowTooltip: true,
          options: [
            {
              l: "法律  ",
              v: 1,
            },
            {
              l: "问答  ",
              v: 2,
            },
            {
              l: "头条 ",
              v: 3,
            },
            {
              l: "合同",
              v: 4,
            },
            {
              l: "咨询",
              v: 5,
            },
            {
              l: "项目",
              v: 6,
            },
            {
              l: "合同智审",
              v: 20,
            },
            {
              l: "诉讼模拟",
              v: 21,
            },
          ],
        },
        {
          label: "标题",
          mode: "title",
          showOverflowTooltip: true,
        },
        {
          label: "订单金额",
          mode: "amount",
          align: "right",
          showOverflowTooltip: true,
        },
         {
          label: "实付金额",
          mode: "voucher",
          align: "right",
          showOverflowTooltip: true,
        },
        // {
        //   label: "创建时间",
        //   mode: "createdTime",
        //   showOverflowTooltip: true,
        // },
        // {
        //   label: "订单状态",
        //   mode: "status",
        //   effectiveStatus: true,
        //   options: [
        //     {
        //       l: "已完成",
        //       v: 0,
        //     },
        //     {
        //       l: "未支付",
        //       v: 1,
        //     },
        //     {
        //       l: "服务中",
        //       v: 2,
        //     },
        //   ],
        // },
      ],
      CS: {
        "min-width": "50px", //最小宽度
        "word-break": "break-all", //过长时自动换行
        color: "#2E3F5E",
      },
      LS: {
        color: "#999999",
        height: "20px",
        "min-width": "110px",
        "word-break": "keep-all",
      },
        // 消费订单列表
      consumptiontable:[],
      // 问圈ID
      masetrid:"",
      // 父主键传过来搜索参数
      seachdata:{},
      // 分页参数
      pageing: { pageNum: 1, pageSize: 10, total: 0 },
      consultingState: false, //咨询弹窗
      contractshow: false, //合同弹窗
      projectShow: false, //项目弹窗

      // ************项目************
      projectData: {}, //项目的信息
      orderInfo: {}, //订单的信息

      recordShow: false, // 项目更改记录
      editRewardShow: false, // 修改报酬0
      editRatioShow: false, //修改收比
    };
  },
  // computed: {
  //   consumptionlist() {
  //     const pageing = this.pageing;
  //     pageing.total = this.consumptiontable.length;
  //     console.log(this.consumptiontable);
  //     if (pageing.total < 10) {
  //       return this.consumptiontable;
  //     }
  //     let small = undefined;
  //     if (pageing.pageNum > 1) {
  //       small = (pageing.pageNum - 1) * pageing.pageSize;
  //     } else {
  //       small = 0;
  //     }
  //     let max = pageing.pageNum * pageing.pageSize;
  //     this.pageing = pageing;
  //     // 转时间格式 220901
  //     let arr = this.consumptiontable.slice(small, max);
  //     // arr.forEach(itme=>{
  //     //   itme.createdTime = this.getTime(itme.createdTime)
  //     // })
  //     return arr;
  //   },
  // },
  // watch: {
  //   consumptiontable: {
  //     handler(list) {
  //       this.pageing.total = list.length;
  //     },
  //     deep: true,
  //   },
  // },
  methods: {
     //查询列表
   async  Consumptionlist(val){
    console.log(val,"操作");
     this.masetrid=val
    await  this.getConsumptionapilistfn();
    },
     //查询消费订单信息
    async getConsumptionapilistfn(arr) {
      let data = {
        circleId: this.masetrid,
        phone: arr && arr.phone,
        status: arr && arr.status,
        type: arr && arr.type,
        pageNum: this.pageing.pageNum,
        pageSize: this.pageing.pageSize,
        
      };
      let { rows, code,total } = await getConsumptionapilist(data);
      if (code == 200) {
        this.pageing.total=total
        let filterData = rows;
        filterData.forEach((item) => {
          if (item.amount) {
            item.amount = this.$options.filters["sumFilters"](item.amount);
          }
        });
        this.consumptiontable = filterData;
      }
    },
    //查询对应ID订单信息
    async getConsumptionapigetInfofn(id) {
      let { code, data } = await getConsumptionapigetInfo({ id });
      if (code != 200) return;
      this.oderlist = data;

      // 获取当前订单的左上角未读信息
      this.getOrderMeetList();
    },

    // 项目未读信息的接口
    async getOrderMeetList() {
      let result = await getMessageList();
      if (result.code == 200) {
        let list = result.data.rows;
        let unrObj = list.find((itme) => {
          return itme.id == this.orderInfo.orderNo;
        });
        this.unread = 0; //清除之前的聊天
        if (unrObj && unrObj.unread) {
          this.unread = unrObj.unread;
        }
      }
    },

    // 转时间格式 220901
    getTime(days) {
      // console.log(days, "11111111111111111111");
      let time = days.split(" ")[0];
      let arr = time.split("-");
      return arr[0].slice(2) + arr[1] + arr[2];
    },

    //支付状态
    selecstatus(value) {
      const stateMap = {
        "-1": "已关闭",
        0: "已完成",
        1: "未支付",
        2: "已支付",
        3: "进行中",
      };
      return stateMap[value];
    },
    selectype(value) {
      const stateMap = {
        1: "法律  ",
        2: "问答  ",
        3: "头条  ",
        4: "合同  ",
        5: "咨询 ",
        6: "项目 ",
        20: "合同智审",
        21: "诉讼模拟",
      };
      return stateMap[value];
    },
    RowClickFn(value) {
      console.log(value.type, "111");
      if (value.type == 5) {
        this.consultingState = true; //显示详情
        this.getConsumptionapigetInfofn(value.id);
      } else if (value.type == 6) {
        //获取订单的信息
        this.orderInfo = value;
        // 显示项目弹窗
        this.projectShow = true;
      } else {
        this.contractshow = true;
        this.getConsumptionapigetInfofn(value.id);
      }
    },
    message() {
  
      // 跳转到当前项目的聊天页面
        this.$router.push({
        path: "/Bm-personalCenter/messageCenter",
        query: { orderId: this.oderlist.orderNo },
      });
  
    },
    //关闭抽屉
    eventColse() {
      this.consultingState = false; //显示详情
    },
    // 合同弹窗关闭
    contractColse() {
      this.contractshow = false;
    },

    // 项目******************************
    // 弹窗关闭
    projectColse() {
      //显示项目
      this.projectShow = false;
    },

    // 单击项目更改记录**********
    clickRecord() {
      // 显示更改记录
      this.recordShow = true;
      // 隐藏项目
      this.projectShow = false;
    },

    // 关闭更改记录
    recordColse() {
      // 隐藏更改记录
      this.recordShow = false;
      // 显示项目
      this.projectShow = true;
    },

    //点击关闭项目改价**********
    editRewardColse() {
      // 隐藏项目改价
      this.editRewardShow = false;
      // 关闭的时候通过$bus清空上一次的改价信息
      this.$bus.$emit("clearEditInfo");
      // 显示项目
      this.projectShow = true;
    },
    //点击关闭修改收比**********
    editRatioColse() {
      // 隐藏修改收比
      this.editRatioShow = false;
      // 显示项目
      this.projectShow = true;
    },
       handleCurrentChange(pageNum) {
      this.pageing.pageNum = pageNum;
      this.getConsumptionapilistfn(this.seachdata);
    },
    // 页容量发生改变
    handleSizeChange(pageSize) {
      this.pageing.pageSize = pageSize;
      this.getConsumptionapilistfn(this.seachdata);
    },

  },
  mounted() {
    // 通过$bus关闭修改项目改价弹窗
    this.$bus.$on("editRewardBus", (projectData) => {
      // 项目的信息
      this.projectData = projectData;
      // 显示项目改价
      this.editRewardShow = true;
      // 隐藏项目
      this.projectShow = false;
    });

    // 通过$bus关闭修改收比弹窗
    this.$bus.$on("editRatioBus", () => {
      // 显示修改收比
      this.editRatioShow = true;
      // 隐藏项目
      this.projectShow = false;
    });

    // 获取父组件传过来的搜索参数
     this.$bus.$off("SeachConsumption")
     this.$bus.$on("SeachConsumption", (item) => {
      this.seachdata=item
      this.getConsumptionapilistfn(item);
    
    });

    
  },
};
</script>

<style scoped>
h3,
h4,
p,
ul,
li {
  margin: 0;
  padding: 0;
}

.documentary-box {
  height: 100%;
}
.documentary-box .el-row {
  height: 100%;
  margin-bottom: 0;
}
.documentary-box .el-col,
.documentary-box .el-card {
  height: 100%;
}
.documentary-box .el-card {
  position: relative;
}
.documentary-box >>> .el-card__body {
  height: 100%;
}
.documentary-box >>> .el-card__body > div {
  height: 92%;
  overflow-y: auto;
}
.documentary-box >>> .el-card__body > div::-webkit-scrollbar {
  width: 0;
}

/* 分页器 */
::v-deep .documentary-box .pagination {
  text-align: center;
  margin-top: 30px;
}

/* 表单样式 */
::v-deep .documentary-box .el-form .el-input--medium {
  width: 140px !important;
}
::v-deep .documentary-box .el-form .el-form-item .el-button--default {
  display: none;
}

/* 表格样式 */
::v-deep .el-table .el-table__header-wrapper th {
  background-color: #fff;
}
::v-deep .el-table th.is-leaf {
  border-top: 1px solid #efefef;
  border-bottom: 1px solid #efefef;
}
::v-deep .el-table th > .cell {
  font-size: 12px;
  color: #909aaa;
}
::v-deep .el-table .cell,
::v-deep .el-table .cell p {
  margin: 0;
  font-size: 14px;
  color: #2e3f5e;
}
::v-deep .el-table .cell .el-button {
  color: #f87a23;
}
::v-deep .el-table .cell .el-table__expand-icon i::before {
  content: "\E791";
}
::v-deep .el-table td {
  /* border-bottom: 0; */
}
::v-deep .el-table td .islight {
  color: #f87a23;
  cursor: pointer;
}
::v-deep .el-table .el-table__expanded-cell[class*="cell"] {
  padding: 0;
}
::v-deep .el-table__expanded-cell .el-table::before {
  height: 0;
}
::v-deep .el-table__expanded-cell .el-table th.is-leaf {
  border-top: 0;
}
::v-deep .el-table__expanded-cell .el-table td {
  border-bottom: 0;
}
.assistant-box span:last-child > i {
  display: none;
}
.businEdit {
  padding: 20px;
  height: 100%;
}
.codeclass {
  margin: 0 20px;
  height: 40px;
  background-color: #f4f5f8;
  line-height: 40px;
  padding-left: 10px;
}
/* 表格样式 end */

/* 订单详情 */
.drawer-title {
  font-size: 12px;
  font-weight: 400;
  color: #99a2b1;
}
.drawerMain {
  padding: 0 30px;
}
.orderNo-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  background-color: #f4f5f8;
}
.orderNo-box .svg-icon {
  font-size: 24px;
  /* padding: 5px; */
  margin: 10px 20px;
}
>>> .orderNo-box .el-badge__content.is-fixed {
  position: absolute;
  top: 15px;
  right: 30px;
  transform: translateY(-50%) translateX(100%);
}
.drawerMain h4 {
  padding: 10px 15px;
  font-size: 12px;
  font-weight: 400;
  color: #2e3f5e;
}

.drawerMain h3 {
  font-size: 16px;
  font-weight: 600;
  color: #2e405e;
  margin-bottom: 20px;
  margin-top: 30px;
}
.drawerMain ul {
  border-bottom: 1px solid #efefef;
}
.drawerMain li {
  display: flex;
  flex-wrap: wrap;
  font-size: 14px;
  margin-bottom: 15px;
}
.drawerMain li > span {
  display: block;
  width: 15%;
  color: #999999;
}
.drawerMain li > p {
  font-size: 14px;
  font-weight: 400;
  color: #232323;
}
.drawerMain li > p > a {
  display: block;
  color: #f87a23;
  margin-bottom: 15px;
}
/* 订单详情 end*/

/* 更改记录按钮 */
.recordBtn {
  cursor: pointer;
}
/* 附件 */
.accessory {
  margin-top: 10px;
}
.accessory ul {
  padding: 0;
}
.accessory ul > li {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  font-size: 12px;
  color: #666;
  border: 1px solid #efefef;
  border-radius: 8px;
}
.accessory ul > li > a {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.accessory ul > li svg {
  cursor: pointer;
  font-size: 16px;
}
</style>

<style lang="scss" scoped>
// 解答样式
.awearItem-box {
  .title-box {
    display: flex;
    align-items: center;
    img {
      height: 32px;
      width: 32px;
      border-radius: 50%;
    }
    .name {
      font-size: 14px;
      font-weight: 800;
      margin: 0 8px 0 10px;
    }
    .time {
      font-size: 12px;
      color: #999;
    }
    margin-bottom: 15px;
  }
  .comment-content {
    font-size: 14px;
    margin-bottom: 30px;
    .content-box {
      margin: 15px 0;
      line-height: 24px;
    }
  }

  .law-box {
    // font-weight: 800;
    margin-top: 10px;
    color: #868fa3;
    background-color: #f6f7fa;
    padding: 15px;
    border-radius: 4px;
    .law-tile {
      font-weight: bold;
      margin-bottom: 10px;
    }
    .law-content {
      padding: 0px;
      font-size: 14px;
      line-height: 24px;
    }
  }

  .file-box {
    margin: 15px 0;
    .file-list {
      display: flex;
      align-items: center;
      color: #666;
      border-radius: 8px;
      border: 1px solid #efefef;
      padding: 10px 15px;
      margin-bottom: 10px;
      i {
        margin-right: 10px;
      }
      svg {
        font-size: 20px;
        margin-left: auto;
      }
    }
  }
}
</style>
